<!-- 信息编辑弹窗 -->
<template>
  <div class="card">
    <el-dialog
    v-model="$store.state.infoEdit"
    :show-close="false"
    :width="'520px'"
  >
    <template #header="{}">
      <div class="m-header">
        <div class="mh-tit">
          <Edit class="icon" />
          <span>信息编辑</span>
        </div>
        <span class="m-tip">请根据您的个人情况进行信息的修改！</span>
      </div>
    </template>
    <div class="m-content">
      <div class="subject">
        <div class="options">
          <div class="option">
            <span class="o-label">头像：</span>
            <div class="avatar-uploader">
              <el-upload
                class="avatar-upload"
                :action=uploadUrl
                :headers="{ Authorization: 'Bearer ' + token }"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </div>
          </div>
          <div class="option">
            <span class="o-label">用户名：</span>
            <el-input spellcheck="false" maxlength="20" placeholder="请输入用户名，长度不能超过20位" v-model="userName"></el-input>
          </div>
          <div class="option">
            <span class="o-label">真实姓名：</span>
            <el-input spellcheck="false" maxlength="8" placeholder="请输入真实姓名" v-model="realName"></el-input>
          </div>
          <div class="option">
            <span class="o-label">地址：</span>
            <el-input spellcheck="false" maxlength="40" placeholder="请输入地址" v-model="addr"></el-input>
          </div>
          <div class="option">
            <span class="o-label">个人介绍：</span>
            <el-input type="textarea" maxlength="100" placeholder="请输入个人介绍" resize="none" spellcheck="false" show-word-limit :rows="5" v-model="intro"></el-input>
          </div>
        </div>
      </div>
    </div>
    <template #footer="{}">
      <div class="m-footer">
        <button class="active-bnt" @click="changeInfo">确认</button>
        <button
          class="cancel-bnt"
          @click="$store.commit('switchInfoEdit', false)"
        >
          取消
        </button>
      </div>
    </template>
  </el-dialog>
  </div>
  
</template>

<script>
import { Plus } from '@element-plus/icons-vue'

export default {
  components: {
    Plus
  },
  data() {
    return {
      addr: '',
      realName: '',
      userName: '',
      intro: '',
      avatarUrl: '',
      imageUrl: '',
      token: localStorage.getItem('token')
    };
  },
  computed:{
    uploadUrl(){
      return `${this.$store.state.baseUrl}/upload`
    }
  },
  methods:{
    handleAvatarSuccess(response, uploadFile) {
      if (response.code === 200) {
        console.log(response)
        this.imageUrl = response.data;
        this.avatarUrl = response.data;
        this.$tools.alertMsg('头像上传成功', 'success');
      } else {
        this.$tools.alertMsg('头像上传失败', 'error');
      }
    },
    beforeAvatarUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$tools.alertMsg('上传头像图片只能是图片格式!', 'warning');
        return false;
      }
      if (!isLt2M) {
        this.$tools.alertMsg('上传头像图片大小不能超过 2MB!', 'warning');
        return false;
      }
      return true;
    },
    async changeInfo(){
      const that = this;
      const info = this.$store.state.userInfo;
      console.log(that.avatarUrl)
      const query = {
        mname: that.userName||info.mname,
        realname: that.realName||info.realname,
        introduce: that.intro||info.introduce,
        addr: that.addr||info.addr,
        photo: that.avatarUrl||info.photo
      };
      await that.$axios.post("updateCommon",query).then((response) => {
        console.log(response) 
        if (response.status != 200) return that.$tools.alertMsg('系统错误', 'error');
        if (response.data.code == 200) {
          that.$tools.alertMsg('修改成功', 'success');
          that.$store.commit('switchInfoEdit', false);
          that.$store.commit('updateInfo',query);
        } else {
          that.$tools.alertMsg('修改个人信息失败', 'warning', 1500); 
        }
      }).catch(function (error) {
        console.log(error)
      })
      
      // console.log(query)
    },
    update(info){

    },
  }
};
</script>

<style scoped lang="less">
.icon{
  width: 30px;
  height: 30px;
}
/deep/ .el-dialog{
  border-radius: 8px;
}

.avatar-uploader {
  width: 100%;
  // display: flex;
  // justify-content: center;
  
  :deep(.el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  :deep(.el-upload:hover) {
    border-color: var(--el-color-primary);
  }
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
  object-fit: cover;
}
.m-header {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0px 30px;
  padding-bottom: 16px;
  border-bottom: 2px solid #ccc;
  .mh-tit {
    display: flex;
    align-items: center;
    color: #1999FF;
    img {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      padding: 3px;
    }
    span {
      font-weight: bold;
      font-size: 20px;
    }
  }
  .m-tip {
    padding-left: 6px;
    color: #666;
    font-size: 14px;
  }
}
.m-content {
  padding: 0px 60px;
  margin-top: -20px;
  .subject{
    padding: 10px 0px;
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 17px;
    .options {
      .option {
        display: flex;
        align-items: center;
        margin: 5px 0px;
        .o-label {
          width: 22%;
          flex-shrink: 0;
          font-size: 15px;
          margin-right: 10px;
        }
      }
    }
  }
}
.m-footer {
  .active-bnt {
    background-color: #1999FF;
    color: #fff;
    padding: 5px 16px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    margin-right: 6px;
  }
  .cancel-bnt {
    vertical-align: 1%;
    font-size: 16px;
    background: none;
  }
}
</style>
